<template>
  <div class="topTwo">
    <div class="Carousel">
      <el-carousel :interval="3000" arrow="always" indicator-position="none" height="400px" width="700px">
        <el-carousel-item>
          <div class="el_img" style="width: 100%;height: 100%;">
            <img src="https://img0.baidu.com/it/u=3984883007,2077652558&fm=26&fmt=auto&gp=0.jpg"/>
          </div>
          <div class="cover">
            <div class="c_title">
              爱心公益
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;伸出温暖手，打开爱心门。用我们的爱托起明天的希望，大爱善举，牵手你我他，让爱的接力棒永远传递。奉献爱心，收获希望。关心社会福利
              事业，关爱社会弱势群体。
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div style="width: 100%;height: 100%;" class="el_img">
            <img src="https://img2.baidu.com/it/u=1546614105,1523611049&fm=26&fmt=auto&gp=0.jpg"/>
          </div>
          <div class="cover">
            <div class="c_title">
              关注留守儿童，从我做起
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;3月15日中国红十字基金会与内蒙古伊利公益基金会联合发起“伊利营养2020”项目。累计投入8400余万元人民币，60余万儿童从中受益。。
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div style="width: 100%;height: 100%;" class="el_img">
            <img src="../../../assets/image/home/img2.jpeg"/>
          </div>
          <div class="cover">
            <div class="c_title">
              关注留守儿童，从我做起
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;7月15日，大学生志愿者指导留守孩子写生。
              近日，安徽大学、西南政法大学等高校的50多名大学生志愿者，利用暑假分批来到安徽泾县“王直助教中心”，开展助教献爱心活动。
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="details">
      <div class="details_L">
        <br/>
        <span style="margin-left: 30px;color: #ff260f;">今日义卖</span>
        <span style="margin-left: 210px;color: #ff260f;" @click="more" id="moremore">更多</span>
        <br/>
        <div class="xian"></div>
        <div class="shop">
          <ul id="ym">
            <li v-for="item in product" :key="item.productHomeImageUrl">
              <div class="left">
                <img :src="item.productHomeImageUrl"/>

              </div>

              <div class="right ">
                <div class="right_title"
                     @click="choosePay(item)">
                  {{ item.productName.substr(0, 11) + '...' }}
                </div>
                <div class="content">
                  &nbsp;&nbsp;&nbsp;&nbsp;{{ item.productDetail.substr(0, 25) + '...' }}
                </div>

              </div>
			  <hr >
            </li>
          </ul>
        </div>
      </div>
      <div class="details_R">
        <div class="d_title">
          <i style="margin-left:20px"><img src="../../../assets/image/home/tongzhi.png" alt=""/></i>
          <span class="d_title_p">通知公告</span>
        </div>
        <div class="msg">
          <div class="msg_msg">
            <span style="position: absolute;top:5%;left:5%">捐赠次数</span>
            <span
              style="position: absolute;top:15%;left:20%;font-size: 18px;color: green;">2,891,520,771
								次</span>
            <span style="position: absolute;top:25%;left:5%">捐赠金额</span>
            <span
              style="position: absolute;top:35%;left:20%;font-size: 18px;color:skyblue;">4,456,081.45
								元</span>
          </div>

          <div class="jz_title">实时捐赠</div>
          <div class="jz" id="jz">
            <ul>
              <li v-for="item in donation" :key="item.index">
                <span id="item_nickname"> {{item.nickName}}</span>
                <span id="item_money">{{item.donationMoney}}元</span>
              </li>
<!--               <li v-for="item in jzData" :key="item.index">-->
<!--                {{ item.name }} &emsp;&emsp;&emsp;{{ item.money }}-->
<!--              </li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import $ from "jquery";
	import {
	  find,
	  donation,
	  getnickname,
	  getPic,
	  findType
	} from "network/home.js";
    export default {
        name: "topTwo",
      data() {
        return {
          product: [],
          donation: [],
          jzData: [{
            name: "王小虎",
            time: "2分钟前",
            money: "1.00元"
          },
            {
              name: "王二虎",
              time: "1分钟前",
              money: "11.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            },
            {
              name: "王三虎",
              time: "20分钟前",
              money: "100.00元"
            }
          ]
        };
      },
      methods:{
       async findProduct() {
		    let res=await find();
			console.log("这是商品列表数据：")
			console.log(res);
		    this.product = res.payload;
			console.log(this.product)
        },
        choosePay(index) {
          this.$router.push({
            path: '/detail?type=category&id=' + index.productId
          })
          // alert(index.productId);
        },

        donations() {
          donation().then(res => {
            console.log(res);
            this.donation = res.page.list;
          }).catch(error => {
            console.log(error);
          });
        },
        hover() {
          $(".el_img").mouseenter(function () {
            $(".cover").css({
              bottom: 0
            })
          });
          $(".Carousel").mouseleave(function () {
            $(".cover").css({
              bottom: -140
            })
          });
        },
        more() {
          this.$router.push('/charity/charityMall')
        },
      },
      mounted() {
        this.findProduct();
        this.donations();
        this.hover();
      }
    }
</script>

<style scoped>
  .topTwo {
    width: 90%;
    height: 450px;
    position: relative;
    margin: 0 auto;
  }

  .Carousel {
    width: 30%;
    height: 400px;
    position: relative;
    left: 95px;
    top: 0px;
    background-size: cover;
    float: left;
    border-radius: 5px;
    overflow: hidden;
  }
  #moremore:hover {
    cursor: pointer;
  }
  .Carousel img {
    width: 100%;
    height: 100%;
  }
  el-carousel-item img {
    z-index: 1;
  }

  .cover {
    width: 100%;
    height: 140px;
    background-color: rgba(181, 197, 198, 0.6);
    z-index: 222;
    position: absolute;
    bottom: -140px;
    transition: all 0.8s;
    color: black;
    cursor: pointer;

  }
  .c_title {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
  }

  .c_content {
    line-height: 20px;
    font-size: 15px;
    margin-top: 15px;
  }
  .xian {
    background-image: url("../../../assets/image/home/xian.png");
    background-repeat: no-repeat;
    width: 80%;
    height: 3px;
    margin-left: 30px;
  }
  .details {
    width: 60%;
    float: left;
    height: 400px;
    margin-left: 90px;
    margin-top: -10px;
  }

  .details_L {
    width: 55%;
    height: 101%;
    overflow: hidden;
    float: left;	
  }
	
.details_L ul{
	overflow: hidden;
}
  .details_R {
    width: 45%;
    height: 105%;
    float: left;	
  }
  .shop {
    width: 80%;
    height: 85%;
    position: relative;
    left: 8%;
    top: 2%;
    font-size: 18px;
  }

  .msg {
    width: 80%;
    height: 85%;
    border-radius: 15px;
    border: 2px solid rgb(253, 234, 203);
    box-shadow: 2px 2px 2px 2px rgb(254, 254, 252);
    position: relative;
    top: 5px;
  }

  ul li {
    text-decoration: none;
    list-style-type: none;
  }
  li:hover{
    cursor: pointer;
  }
  .shop li {
    float: left;
    width: 100%;
    position: relative;
	height: 59px;
  }

  .shop ul {
    width: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .time {
    position: absolute;
    right: 10px;
  }

  .msg_msg {
    width: 100%;
    height: 50%;
    background-image: url("../../../assets/image/home/bgbgs.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .msg ul {
    text-align: center;
    width: 100%;
    height: auto;
  }

  .msg li {
    text-align: center;
    margin-top: 15px;
  }
  .jz {
    width: 100%;
    height: 43%;
    background-color: #fff5db;
    position: relative;
    bottom: 0;
    overflow-y: hidden;
    font-size: 14px;
	overflow: hidden;
  }
  #item_nickname{
    margin-left:60px;
    float: left;
    text-align: left;
  }
  #item_money{
    /*float: left;
    margin-left:80px;
   text-align: left;*/
  }
  .jz_title {
    width: 100%;
    height: 7%;
    background-color: #ffe7bf;
    text-align: center;
	border-radius: 5px;
  }

  .jz ul {
    background-color: transparent;
	position: relative;
  }

  .jz li {
	position: relative;
  }
  #ym {
    overflow: hidden;
  }

  #ym .left {
    position: absolute;
    left: 0px;
    width: 25%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center center;

  }

  #ym .left img {
    width: 70%;
    margin-top: 10px;
    height: 70%;
  }


  #ym .right {
    font-size: 12px;
    position: absolute;
    left: 25%;
    bottom: 0px;
    width: 70%;
    height: 100%;

  }

  #ym .right_title {

    width: 100%;
    height: 25%;
    color: #007AFF;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  #ym .right .content {
    width: 100%;
    height: 74%;
    overflow: hidden;
    text-align: left;
    font-size: 13px;
    overflow: hidden;
    margin-top: 10px;
  }
  .d_title {
    width: 80%;
    height: 30px;
    border-radius: 12px;
    border: 1px solid red;
    background-color: #c30000;
    margin-top: 15px;
    color: white;
    position: relative;
  }

  .d_title_p {
    text-align: center;
    margin-left: 40px;
    line-height: 15px;
    height: 15px;
    position: absolute;
    top: 6px;
  }
</style>
